<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>EventManager</title>
	<style type="text/css" media="screen">
		table tbody tr td { padding: 5px 10px; }
		table tbody tr td select { width: 100px; }
		.dialog-mask { position: fixed; right: 0; top: 0; background: #000; opacity: 0.5; width: 100%; height: 100%; z-index: 2000 }
		.dialog-wrapper {position: fixed; right: 50%; top:50%; width: 500px; height: 300px; transform: translateX(250px) translateY(-150px); background: #fff; z-index: 2001; box-sizing: border-box;padding: 10px 20px;}
	</style>
</head>
<body>
	<div id="app">
		<table border="1" cellpadding="0" cellspacing="0">
			<thead>
				<tr> <th>name</th> <th>age</th> <th>address</th> </tr>
			</thead>
			<tbody>
				<tr v-for="row in tableData" @click="handleRowClick(row)">
					<td>
						<div v-if="row === editingRow">
							<select v-model="row.name">
								<option v-for="item in nameOptions" :value="item.value" :key="item.key" :label="item.value"></option>
							</select>
							<a href="javascript:;" @click="handleAddBtnClick">添加</a>
						</div>
						<div v-else> {{ row.name }} </div>
					</td>
					<td>{{ row.age }}</td>
					<td>{{ row.address }}</td>
				</tr>
			</tbody>
		</table>
		<el-dialog v-show="isAddDlgShow" @hide="isAddDlgShow = false" @save-success="isAddDlgShow = false"></el-dialog>
	</div>
 	<script src="https://unpkg.com/vue/dist/vue.js"></script>
 	<script src="EventManager.js"></script>
 	<script>
 		Vue.component('el-dialog', {
  template: `<div v-show="visible">
    <div :class="['dialog-wrapper', customClass]">
    	弹出框内容
    </div>
    <div class="dialog-mask"></div>
  </div>`,
  
  props: {
  	visible: {
      type: Boolean,
      default: false
    },
    
    customClass: {
      type: String,
      default: ''
    },
  },

 	mounted() {
 		window.addEventListener('keydown', e => {
 			if (e.keyCode === 27) {
 				// ESC键
 				this.close();
 			}
 		});
 	},

 	methods: {
 		close() {
    	this.$emit('update:visible', false);
 			this.$emit('hide');
 		}
 	}
});

new Vue({
  el: "#app",
  data: {
    outerDialogVisible: false,
    innerDialogVisible: false
  },
  methods: {
  	openDialog(){
    	this.outerDialogVisible = true;
      this.innerDialogVisible = true;
    }
  }
})
 		Vue.component('el-dialog', {
 			template: `<div>
 				<div class="dialog-wrapper">
 					<input type="text" v-model="value">
 				</div>
 				<div class="dialog-mask"></div>
 			</div>`,

 			data() {
 				return {
 					value: ''
 				}
 			},

 			mounted() {
 				window.addEventListener('keydown', e => {
 					console.log('e', e);
 					if (e.keyCode === 13) {
 						// Enter键
 						this.saveResult();
 					} else if (e.keyCode === 27) {
 						// ESC键
 						this.closeDlg();
 					}
 				});
 			},

 			methods: {
 				saveResult() {
 					alert(`保存值：${ this.value }`);
 					this.$emit('save-success', this.value);
 				},

 				closeDlg() {
 					alert(`关闭弹窗`);
 					this.$emit('hide');
 				}
 			}

 		});

 		var vm = new Vue({
 			data() {
 				return {
 					isAddDlgShow: false,
 					oldRow: null,
 					editingRow: null,
 					nameOptions: [{ key: 1, value: 'Jack'}, { key: 2, value: 'Mark'}, { key: 3, value: 'Lucy'}, { key: 4, value: 'Lili'}],
 					tableData: [
 						{ name: 'Mark', age: 18, address: 'Guangzhou' }, 
 						{ name: 'Lucy', age: 18, address: 'Hunan' }
 					]
 				}
 			},

 			mounted() {
 				window.addEventListener('keydown', e => {
 					console.log('e', e);
 					if (e.keyCode === 13) {
 					// Enter键
 						this.saveRow();
 					} else if (e.keyCode === 27) {
 					// ESC键
 						this.repealRow();
 					}
 				});
 			},

 			methods: {
 				handleRowClick(row) {
 					this.editRow(row);
 				},

 				editRow(row) {
 					// 如果是深层对象这里需要使用深拷贝
 					if (this.editingRow === row) return;
 					this.oldRow = Object.assign({}, row);
 					this.editingRow = row;
 				},

 				saveRow() {
 					if (!this.editingRow) return;
 					alert(`保存【${ this.editingRow.name }】的数据。`);
 					this.editingRow = null;
 				},

 				repealRow() {
 					if (!this.editingRow) return;
 					alert(`完成撤销`);
 					Object.assign(this.editingRow, this.oldRow);
 					this.editingRow = this.oldRow = null;
 				},

 				handleAddBtnClick() {
 					this.isAddDlgShow = true;
 				}
 			}
 		});
 		vm.$mount('#app');
 	</script>
</body>
</html>